<div id="overviewPage">
<div class="overview" id="overview">
    <div class="banner">
        <table>
        <tr data-template>
            <td><span class='date'>{{date}}</span></td>
            <td><span class='location'>{{location}} / {{city}}, {{state}}</span></td>
            <td class="right"><span class='tournament'>{{tournament}}</span></td>
        </tr>
        </table>
    </div>
    <div class="clear"></div>
    <div class="matchup">
        <table data-template>
        <tr><td class="visitor-col" >
            <div class="homevisitor">Visitor</div>
            <div data-template class="logo"><div class="awayLargeIcon"/></div>
            <div data-template class="team {{away.winLoss}}">{{away.name}}</div>
            </td>
            
            <td>
            <table class="boutinfo">
            <tr class="score-raw">
                <td class="left"><div class="score {{away.winLoss}}">{{away.score}}</div></td>
                <td class="vs">vs</td>
                <td class="right"><div class="score {{home.winLoss}}">{{home.score}}</div></td>
                </tr>
            </table>
            </td>
            
            <td class="home-col">
            <div class="homevisitor">Home</div>
            <div class="logo"><div class="homeLargeIcon"/></div>
            <div class="team {{home.winLoss}}">{{home.name}}</div>
        </td></tr>
        </table>
    </div>
</div>

<div id="scorecharts">
    <ul>
        <li><a href="#chart_totalscoreperjam">Total Score per Jam</a>
        </li>
        <li><a href="#chart_totalscorediffperjam">Total Score Margin Per Jam</a>
        </li>
        <li><a href="#chart_scoreperjam">Score Per Jam</a>
        </li>
        <li><a href="#chart_scorediffperjam">Score Margin Per Jam</a>
        </li>
    </ul>
    <div id="chart_totalscoreperjam" >
        <div class="chartdesc">What was the state of the game for a given jam?</div>
    </div>
    <div id="chart_totalscorediffperjam">
        <div class="chartdesc">How many points ahead was a team on a given jam?</div>
    </div>
    <div id="chart_scoreperjam">
        <div class="chartdesc">How many points were scored by each team per jam?</div>
    </div>
    <div id="chart_scorediffperjam">
        <div class="chartdesc">What was the effective score margin per jam?</div>
    </div>
</div>

<div id="rosters" >
<div data-template class="{{side}} roster">
    <div class="caption">{{name}}</div>
    <table class="oddeven">
        <tr data-template-for="roster"><td>{{name}}</td><td class="light">{{number}}</td></tr>
    </table>
</div>
</div>

<div class="boxscore">
    <table><thead><tr><th/><th>P1</th><th>P2</th><th>Total</th><th class="pen">Penalty</th></tr></thead>
    <tr data-template><td>{{name}}</td><td>{{p1}}</td><td>{{p2}}</td><td>{{total}}</td><td>{{majors}}</td></tr>
    </table>
</div>


</div>
